<!DOCTYPE html>
<html>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

	<head>
		<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
		<link rel="stylesheet" type="text/css" href="css/wi.css" />
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/bootstrap-grid.min.css">
		<link rel="stylesheet" href="css/zoomify.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/wi1.css" />
		<!------------>
		<link rel="stylesheet" type="text/css" href="css/baiDuMap.css" />
		<link rel="stylesheet" type="text/css" href="css/mapAndModle.css" />

		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wvmdyESkBodvstIVwCUUtfXuyHH2hfQq"></script>
	</head>
	<script src="js/jquery-1.12.3.js"></script>
	<script src="js/swiper-3.3.1.min.js"></script>
	<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>


<!-----------zdp--------------->
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/hebing.css"media="screen and (min-width:960px)"/>
		<link rel="stylesheet" type="text/css" href="css/hebing_1.css"media="screen and (max-width:959px)"/>
		<link rel="stylesheet" type="text/css" href="css/hebing_2.css"media="screen and (max-width:640px)"/>
		
<!------------zdp----------->
	
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/bg1.jpg" /></div>
				<div class="swiper-slide"><img src="img/bg2.jpg" /></div>
				<div class="swiper-slide"><img src="img/bg3.jpg" /></div>
			</div>
		</div>

		<div class="nav">
			<div class="click">
				<span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
			</div>
			<div class="navleft">
				<div><a href="###">创意玩法</a></div>
				<div><a href="###">增值服务</a></div>
				<div><a href="###">产品介绍</a></div>
			</div>
			<div class="navright">
				<div><a href="###">收益地图</a></div>
				<div><a href="###">精彩模板</a></div>
				<div><a href="###">店长应用</a></div>
			</div>
		</div>
		<div class="nav1"><img src="img/badge - wi.png" /></div>
		<div class="nav1_1"><img src="img/scroll.png" /></div>
		<div class="nav2">
			<div class="nav2_1">

				<div>
					<span>
						<img src="img/14(1).png" alt="" />
					</span>
					<h2>产品介绍</h2>
				</div>
				<div><span><img src="img/02.png"/></span>
					<h2>增值服务</h2></div>
				<div><span><img src="img/16.png"/></span>
					<h2>创意玩法</h2></div>
				<div><span><img src="img/15.png"/></span>
					<h2>收益地图</h2></div>
				<div><span><img src="img/08(1).png"/></span>
					<h2>精彩模板</h2></div>
				<div><span><img src="img/12.png"/></span>
					<h2>店长应用</h2></div>
			</div>
		</div>

		<div id="pic">
			<ul>
				<li class="example">
					<img src="img/06.jpg" data-caption="<span  style=font-size:25px;>购物中心</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/neighbor.jpg" data-caption="<span  style=font-size:25px;>我的邻邦</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/history_KPI.jpg" data-caption="<span  style=font-size:25px;>历史KPI</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/03.jpg" data-caption="<span  style=font-size:25px;>商场一角</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/map.jpg" data-caption="<span  style=font-size:25px;>城市价值分布</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/detail.jpg" data-caption="<span  style=font-size:25px;>明细记录</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/place.jpg" alt="" data-caption="<span  style=font-size:25px;>领地</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/10.jpg" alt="" data-caption="<span  style=font-size:25px;>路边商铺</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/heat.jpg" data-caption="<span  style=font-size:25px;>热力图</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/accout.jpg" data-caption="<span  style=font-size:25px;>账户预览</span><hr style=width:80%;margin:auto;><i id='a1' class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/charts.jpg" data-caption="<span  style=font-size:25px;>仪表盘</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>
				<li class="example">
					<img src="img/customer.jpg" data-caption="<span  style=font-size:25px;>实时客存</span><hr style=width:80%;margin:auto;><i class='icon-plus-sign icon-4x';></i>" />
				</li>

			</ul>
		</div>
		<div id="chanp">
			<div class="chanp1">
				<div class="chanp2">
					<div class="chanplogo">
						<img src="img/14.png" />
					</div>
					<p>WI-BEACON</p>
					<div class="chanptext">
						<span>适用于任何线下商业的聚客、促销、赚钱、看店神器</span>
					</div>
					<div class="shop">
						<a class="onlineShop" href="###">
							<img src="img/weidian.png" />
							<span class="shoptxt">
								进入微店
							</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="rollimg_page">
			<div class="rollimg_wrap">
				<div class="rollimg_btnLast">
					< </div>
						<div class="rollimg_btnNext"> > </div>
						<div class="rollimg_middle">
							<div class="rollimg_1">
								<p>WI-FI促销DIY，我的地盘我做主！</p>
								<p>有Wi-Fi的地方就有你的广告：秒建秒投，立竿见影</p>
								<img src="img/04.png" />
							</div>
							<div class="rollimg_2">
								<p>天天广告费，大家一起赚！</p>
								<p>坐拥持续可观的现金收益，捡$捡到手抽筋</p>
								<img src="img/06.png" />
							</div>
							<div class="rollimg_3">
								<p>前所未有的实体店铺看店神器</p>
								<p>客流、收益、视频，随时随地，尽在掌握</p>
								<img src="img/05.png" />
							</div>
						</div>
				</div>
			</div>
			<div class="chanpin2">
				<div class="aa">
					<div class="aa1">
						<p class="txt1">“店里本来也要买无线路由的，现在不用买了，这个不但几乎免费，最神奇的是， 客人一连wi-beacon，我支付宝就能收到钱，一个热点一年少说几百块，宽带费都挣回来了！”</p>
						<p class="txt2">青年创业者 私房菜小馆老板</p>
					</div>
					<div class="aa2">
						<div class="a2txt1">前所未有的实体店铺看店神器</div>
						<div>
							<p class="a2txt2">每一枚wi-beacon现在都是一个全功能的cusflo客流传感器。您只需一枚免费的wi-beacon，通过浏览器或者手机APP即可立即享受cusflo客流分析服务，并可通过“云眼”实现实时视频监控。</p>
							<p class="a2txt3">cusflo线下客流感知与分析服务从问世便在中国市场排名第一，其分析精度、深度和使用之便利，即便放眼全球亦无人超越。cusflo使您得以直观地查看您店铺附近的客流实况，通过20余款KPI为您刻画每个时刻的客流去重总量、密度、优度、忠诚度、新近度和黏度， 即可为小到几平米的街边小店提供路过客流分析和引入，也可为大到数十万平米的购物中心提供实时客流动线、分布热力图和精确到商户的客流分析。</p>
						</div>

					</div>
					<div class="aa3">
						<div>30日传感器响应率</div>
						<div></div>
						<div>30日在线服务可用率</div>
						<div></div>
						<div>30日高速响应率</div>
						<div></div>
					</div>
					<div class="aa4">
						<div>
							<span>来自客户的声音</span>
						</div>
					</div>
					<div class="aa5">
						<div class="tu1">
							<img src="img/02.jpg" />
						</div>
						<div class="wenzi">
							<p>这么大的开放式商场，长期无法了解每日真实客流情况， 租金定位没有一个客观依据。现在wi-beacon随时向我汇报商场每个区域去重客流情况， “平米效率”终于可以改成更科学的“千客效率”，商场利益得到最大保障。</p>
							<p>老肥，<br /> 万博商城管理部
							</p>
						</div>
					</div>
					<div class="aa6">
						<div class="tu1">
							<img src="img/04.jpg" />
						</div>
						<div class="wenzi">
							<p>候影大厅安装了几个wi-beacon，最初只是想给侯影客人 提供免费上网服务，现在成了周边餐饮的广告投放必争之地。为了争夺优质客源， 这些餐馆不断竞价，几个月下来用店内手机APP一看，收入竟然近万元！</p>
							<p>Jake，
								<br /> XM国际影城
							</p>
						</div>
					</div>
				</div>

				<!-------------------------->
			</div>
			<div class="addvalue_page">
				<div class="addvalue_wrap">
					<img class="addvalue_head_img3" src="img2/white 2.png" />
					<div class="addvalue_head">
						<p class="addvalue_head_img1"><img src="img2/02-in.png" /></p>
						<p class="bigTitle">增值服务</p>
						<p class="addvalue_head_img2"><img src="img2/white-v 3.png" /></p>
						<p>不仅是促销、赚钱、看店神器，更是基于地理未知的O2O节点</p>
						<p></p>
					</div>
					<div class="addvalue_poster">
						<div>
							<p class="tiao"></p>
							<p class="black"><img src="img2/dark-small.png" /></p>
							<div class="poster1">
								<img src="img2/07.png" />
								<p>线下黏客网游</p>
								<p></p>
								<p></p>
							</div>
							<div class="poster2">
								<p>以wi-beacon自动产生的广告收益为基础，为“线下网游”玩家提供可供采集的虚拟资源，驱动B2C、C2C互动，增加店铺黏性</p>
							</div>
							<div style="margin-top: 50px;">
								＊已包含在wi-beacon默认功能中
							</div>
						</div>
						<div>
							<p class="tiao"></p>
							<p class="black"><img src="img2/dark-small.png" /></p>
							<div class="poster1">
								<img src="img2/01.png" />
								<p>线下广告2.0</p>
								<p></p>
								<p></p>
							</div>
							<div class="poster2">
								<p>将卡券投放到附近上游业态商户（邻邦）并展示，吸引上游业态客流入店，提升商圈客流平均流转次数，实现线下B2B共赢</p>
							</div>
							<div style="margin-top: 50px;">
								＊已包含在wi-beacon默认功能中
							</div>
						</div>
						<div>
							<p class="tiao"></p>
							<p class="black"><img src="img2/dark-small.png" /></p>
							<div class="poster1">
								<img src="img2/10.png" />
								<p>路过客流营销</p>
								<p></p>
								<p></p>
							</div>
							<div class="poster2">
								<p>路过客流特征码入库累积，无需向客户索取实名和联系方式，即可按地理位置忠诚度、潜在消费能力等维度实现精准营销</p>
							</div>
							<div style="margin-top: 50px;">
								＊已包含在wi-beacon默认功能中
							</div>
						</div>
					</div>
					<div style="height:10px;margin-top: 20px;"></div>
				</div>
			</div>

			<!-------------------------->
			<div class="ideas_page">
				<div class="ideas_wrap">
					<img class="ideas_wrap_img1" src="img2/yellow.png" />
					<div class="addvalue_head">
						<p class="ideas_wrap_img2"><img src="img2/16.png" /></p>
						<p class="bigTitle2">创意玩法</p>
						<p class="ideas_wrap_img3"><img src="img2/yellow-v.png" /></p>
						<p style="background-color: #FFC000;">wi-beacon让你一站玩转线下互动</p>
						<p style="background-color: #FFC000;"></p>
					</div>
					<div class="ideas_body">
						<div class="ideas_body_center">
							<div class="center_one">
								<div class="center_one_img1" style="float: left;">
									<img src="img2/10(1).jpg" />
									<p>
										<p style="font-size: 30px;margin-top: 3px;">卡券互投</p>
										<p style="margin-top: 8px;font-size: 15px;">店铺可以向周围一定范围内的其他店铺的wi-beacon上自由竞价投放促销卡券， 实现步行范围精准定向广告投放，吸引临近客流入店消费。店铺可以选择是否开放自己的wi-beacon给邻居， 开放给哪些行业的邻居。店铺可以查看自己地盘的卡券并有权踢出第三方内容。</p>
										<p style="height: 30px;"></p>
									</p>
								</div>
								<div style="float: right;">
									<img class="center_one_img2" src="img2/09.jpg" />
									<p>
										<p style="font-size: 30px;margin-top: 3px;">线下网游</p>
										<p style="margin-top: 8px;font-size: 15px;">第三方卡券展示能给wi-beacon的主人带来源源不断的现金收益，主人如果不需要， 这些收益就可以被店内客人以网游虚拟资源的形式采走，客人利用这些虚拟资源可以提升战力和采集能力， 以获取更多资源。客人在游戏中积累的虚拟资源最终可在商铺等同现金消费。</p>
										<p style="height: 30px;"></p>
									</p>
								</div>
							</div>
							<div class="center_two">
								<div>
									<img class="center_two_img" src="img2/shop_inv.jpg" />
									<p>
										<p style="font-size: 30px;margin-top: 3px;">菜品调查</p>
										<p style="margin-top: 8px;font-size: 13px;">还在通过“秘密顾客”来了解菜品和服务的品质么？你out了。现在只需要投放一张 有奖调研卡券在您店内的wi-beacon上，让客人们自己打分，你只需查看定期自动生成的调研报告</p>
										<p style="height: 30px;"></p>
									</p>

								</div>
								<div>
									<img class="center_two_img" src="img2/offline_chat.jpg" />
									<p>
										<p style="font-size: 30px;margin-top: 3px;">线下“旺旺”</p>
										<p style="margin-top: 8px;font-size: 13px;">有了wi-beacon，进入您店铺的客人可以以文字聊天的方式与您直接交流， 俗称线下版“旺旺”，第一时间解决客人的疑惑，回答客人的问题，让线下消费体验得到前所未有的提升</p>
										<p style="height: 30px;"></p>
									</p>
								</div>
								<div style="margin-right: 0;">
									<img class="center_two_img" src="img2/menu.jpg" />
									<p>
										<p style="font-size: 30px;margin-top: 3px;">自助点菜</p>
										<p style="margin-top: 8px;font-size: 13px;">客人就坐后用手机连接wi-beacon，通过点菜卡自助点菜。客人提单， 服务员手机立即收到通知，确认后提交后厨和收银台。全部实现仅靠wi-beacon及其软件，再无其他投资</p>
										<p style="height: 30px;"></p>
									</p>
								</div>
							</div>
							<div class="center_three">
								<div>
									<img class="center_two_img" src="img2/show_que.jpg" alt="" />
									<p>
										<p style="font-size: 30px;margin-top: 3px;">排队等位</p>
										<p style="margin-top: 8px;font-size: 13px;">
											wi-beacon上的每张卡券都支持排队功能。客人到店后可以快速自助排队，然后可以去别处逛， 快排到的时候，cusflo会通过手机短信提醒客人回来。同一客人可同时排多个商家的队
										</p>
										<p style="height: 30px;"></p>
									</p>
								</div>
								<div>
									<img class="center_two_img" src="img2/secret_meeting.jpg" alt="" />
									<p>
										<p style="font-size: 30px;margin-top: 3px;">假面舞会</p>
										<p style="margin-top: 8px;font-size: 13px;">
											如果你此时坐在灯光幽暗的酒吧，想与近在咫尺的朋友聊天，这时候某信某陌摇一摇 也许不是最佳选择。你应该连接wi-beacon，立即可以准确地与同一家酒吧内的朋友开始匿名聊天
										</p>
										<p style="height: 30px;"></p>
									</p>
								</div>
								<div style="margin-right: 0;">
									<img class="center_two_img" src="img2/indoor_loc.jpg" alt="" />
									<p>
										<p style="font-size: 30px;margin-top: 3px;">室内定位与导购</p>
										<p style="margin-top: 8px;font-size: 13px;">
											部署了wi-beacon的场所，客人可以方便地查询自己在场内所处的位置，而不受建筑物内 没有GPS信号的影响，客人同时可以查询某个店铺/某件商品在场内所处位置，并获得动画指引
										</p>
										<p style="height: 30px;"></p>
									</p>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
			<!--</div>-->
			<!--______________________________-->
			<!------------------------->
			<!------------------>
			<div id="wrap">
				<!--________________________________________-->
				<div id="ares_profitMap_modular">
					<!--________________________________________-->
					<!--左侧LOGO-->
					<div id="ares_profitMap_bg">
						<img src="img/profit_map_modular_bg.png" />
					</div>
					<!--中间三角形-->
					<div id="ares_profitMap_triangle">
						<img src="img2/white_triangle.png" />
					</div>
					<!--中间LOGO-->
					<div id="ares_profitMap_logo">
						<img src="img2/profitMap_logo.png" />
					</div>
					<!--大标题-->
					<div id="ares_profitMap_title1">
						收益地图
					</div>
					<!--小标题-->
					<div id="ares_profitMap_title2">
						<img src="img2/white_triangle_v.png" />
						<span>看看今天哪里收益最多？谁赚的最high？</span>
						<div></div>
					</div>
					<!--地图-->
					<div id="ares_ziChenMap">
						<div id="allmap"></div>
					</div>
					<!--今日和最高收益-->
					<div id="ares_profitMap_row">
						<article id="ares_profitMap_fortoday">
							<h3>今日收益前五名</h3>
							<ul>
								<li>期待中<span>期待中</span></li>
								<li>期待中<span>期待中</span></li>
								<li>期待中<span>期待中</span></li>
								<li>期待中<span>期待中</span></li>
								<li>期待中<span>期待中</span></li>
							</ul>
						</article>
						<article id="ares_profitMap_forall">
							<h3>累计收益前五名</h3>
							<ul>
								<li>生生畅饮休闲咖吧<span>￥3737.74</span></li>
								<li>乐盟无限<span>￥1720.21</span></li>
								<li>德克士<span>￥1526.65</span></li>
								<li>壹零酷饮休闲吧<span>￥1370.11</span></li>
								<li>中国空空导弹研究院技工学校<span>￥1173.58</span></li>
							</ul>
						</article>
					</div>

					<!--________________________________________-->
				</div>
				<!--________________________________________-->
				<!--________________________________________-->

					<div id="ares_excellent_modular">
					<!--右侧LOGO-->
					<div id="ares_excellent_bg">
						<img src="img2/excellent_bg.png" />
					</div>
					<!--中间三角形-->
					<div id="ares_excellent_triangle">
						<img src="img2/orange_trangle.png" />
					</div>
					<!--中间LOGO-->
					<div id="ares_excellent_logo">
						<img src="img2/08.png" />
					</div>
					<!--大标题-->
					<div id="ares_excellent_title1">
						精彩模板
					</div>
					<!--小标题-->
					<div id="ares_excellent_title2">
						<img src="img2/orange_triangle_v.png" />
						<span>精彩纷呈的促销卡券，分分钟自己搞定</span>
						<div></div>
					</div>
					<!--瀑布流选择器-->
					<div id="ares_excellent_TabNav">
						<div id="ares_excellent_TabNav_ul">
							<div><a href="###">所有模板</a></div>
							<div><a href="###">促销卡</a></div>
							<div><a href="###">抽奖卡</a></div>
							<div><a href="###">点菜卡</a></div>
							<div><a href="###">调查卡</a></div>
							<div><a href="###">招聘卡</a></div>

						</div>
					</div>
					<!------------------------瀑布客流-------------------->
					<div id="ares_excellent_puBuLiu">
						<div id="choujiang"><img src="img/c01.jpg" alt="" /></div>
						<div id="cuxiao"><img src="img/c02.jpg" alt="" /></div>
						<div id="cuxiao"><img src="img/c03.jpg" alt="" /></div>
						<div id="cuxiao"><img src="img/c04.jpg" alt="" /></div>
						<div id="cuxiao"><img src="img/c05.jpg" alt="" /></div>
						<div id="diancai"><img src="img/c06.jpg" alt="" /></div>
						<div id="cuxiao"><img src="img/c07.jpg" alt="" /></div>
						<div id="zhaopin"><img src="img/c08.jpg" alt="" /></div>
						<div id="cuxiao"><img src="img/c09.jpg" alt="" /></div>
						<div id="diaocha"><img src="img/c10.jpg" alt="" /></div>
						<div id="cuxiao"><img src="img/c11.jpg" alt="" /></div>
					</div>
					<!--________________________________________-->
					

				</div>
				<!----------------------zdp------->
					<div class="zdpp">
					<hr style="background-color:rgb(253,178,0) ;width: 100%;height:5px;">
		<!--三角形-->
		<div class="zHeader"><img src="img/yellow.png" /></div>
		<!--四边形-->
		<div class="zLfet"><img src="img/222zdp.png" /></div>
		<!--店长应用-->
		<div class="zManager">
			<div class="zManager_header"><img src="img2/12.png" /></div><br>
			<p>店长应用</p>
			<div class="zProfitMap_title2">
				<img src="img/yellow-v.png" />
				<span>下载“店内”APP，立即体验店内精彩体验</span>
				<div></div>
			</div>

			<!--直接登陆-->
			<div class="zLoad">
				<p class="q1"><a href="../login.html">传统后台，直接登陆</a></p>
			</div>
		</div>
		<!--摄像头-->
		<div class="Zcamera"><img src="img/product.jpg" /></div>
		<!--那个神奇的列表-->
		<div class="zSp">
			<div class="zStep_1">
				<p>第一步</p>
			</div>
			<div class="zStep_2">
				<span class="a1"><i style="display: block;margin-top: -15px;" class="icon-laptop icon-4x"></i> </span>
			</div>
			<div class="zStep_3">
				<div class="a2">
					<p>购买设备</p>
					<div class="a2_p">
						<span>店</span>
						<a href="###">
							<p>进入微店</p>
						</a>
					</div>
				</div>
			</div>

			<!--第二步-->
			<div class="zSecond">
				<div class="zSecond_1">
					<p>第二步</p>
				</div>
				<div class="zSecond_2">
					<span class="a3"><i  style="display: block;margin-top:-8px;margin-left: 3px;"class="icon-envelope icon-3x"></i> </span>
				</div>
				<div class="zSecond_3">
					<div class="zSecond_4">
						<p>产品配送</p>
						<div class="zSecond_5">
							<ul>
								<li>wi-beacon设备将以最快速度送达您的手中</li>
								<li>安装设备并开始使用</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!--第三步-->
			<div class="zThird">
				<div class="zThird_1">
					<p>第三步</p>
				</div>
				<div class="zThird_2">
					<span class="a4"><i  style="display: block;margin-top:-20px;margin-left: 3px;"class=" icon-mobile-phone icon-5x"></i> </span>
				</div>
				<div class="zThird_3">
					<div class="zThird_4">
						<p>下载店内APP</p>
						<div class="zThird_5">
							<div class="b1"><img src="img2/android.png" />
							</div>
							<p class="b2">Android</p>
							<div class="b3"><img src="img2/apple.png" /></div>
							<p class="b4">ios</p>
							<div class="b5"><img src="img/1B6yitdn3PSm8AAAAAElFTkSuQmCC.png" /></div>
						</div>
					</div>
				</div>
			</div>

			<!--第四步-->
			<div class="zFour">
				<div class="zFour_1">
					<p>第四步</p>
				</div>
				<div class="zFour_2">
					<span class="a5"><i style="display: block;margin-left: 3px;margin-top: -18px;" class=" icon-mobile-phone icon-5x"></i> </span>
				</div>
				<div class="zFour_3">
					<div class="zFour_4">
						<p>注册登陆</p>
						<div class="zFour_5">
							<ul>
								<li>注册管理账号</li>
								<li>设置基本信息</li>
								<li>绑定设备</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="pics">
			<h1>合作商户</h1>
			<hr style="background-color:rgb(253,178,0) ;width: 100%;height:0.5%;">
			<div class="c1">
				<img src="img/dayali.png" />
			</div>
			<div class="c2"><img src="img/dicos.png" /></div>
			<div class="c3"><img src="img/gelin.png" /></div>
			<div class="c4"><img src="img/jiumaojiu.png" /></div>
			<div class="c5"><img src="img/langang.png" /></div>
			<div class="c6"><img src="img/shangdao.png" /></div>
			<div class="c7"><img src="img/wanlong.png" /></div>
			<div class="c8"><img src="img/yipin.png" /></div>
			<div class="c9"><img src="img/zhengongfu.png" /></div>
			<div class="c10"><img src="img/ZOOCOFFEE.png" /></div>
			<div class="c11"><img src="img/qingfeng.jpg" /></div>
			<div class="c12"><img src="img/yimujuecha.jpg" /></div>
			<div class="c13"><img src="img/xibei.jpg" /></div>
			<div class="c14"><img src="img/mingmen.jpg" /></div>
			<div class="c15"><img src="img/unicom.jpg" /></div>
		</div>
		<div class="chat">
			<div class="chat_pic"><img src="img/diannei.JPG"/></div>
		</div>
		<div class="content">
			<div class="content_1"><img src="img/foot-badge.png"/></div>
			<div class="content_2">
				<p class="d1">Zi Consultants & Company, Ltd.</p>
				<p class="d2">Beijing|Jinan|Haikou|Zhengzhou</p>
				<p class="d2">400-001-8603</p>
			</div>
			<div class="xin"><img style="display: block;margin-top:5px;margin-left: 8px;" src="img/email.png"/></div>
		
		</div>
</div>
					<!-------zdp------------------------>
	</body>
	<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="js/jquery.sliphover.min.js"></script>
	<script src="js/zoomify.min.js"></script>
	<script src="js/baiDuMap.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mapAndModle.js"></script>
	<script type="text/javascript">
		function roll() {
			page++;
			// 如果滚到头 从头开始滚动
			if (page > imgs.length - 1) {
				page = 0;
			}
			middle.style.left = -w * page + "px";
		}

		function autoRoll() {
			clearInterval(timer);
			timer = setInterval(function() {
				roll();
			}, 5000);
		}
		var last = document.querySelector(".rollimg_btnLast");
		var next = document.querySelector('.rollimg_btnNext');
		var middle = document.querySelector(".rollimg_middle");
		var imgs = document.querySelectorAll(".rollimg_middle>div");
		var wrap = document.querySelector(".rollimg_wrap");
		//整页翻动的宽度 = wrap的宽度
		var w = wrap.offsetWidth;
		//middle宽度 = 单页宽度 * div个数(页数) + "px"(单位);
		middle.style.width = w * imgs.length + "px";
		//页码
		var page = 0;
		var timer = null;
		// 下一页
		next.onclick = function() {
			clearInterval(timer);
			roll();
		}
		next.onmouseout = function() {
				autoRoll();
			}
			// 上一页
		last.onclick = function() {
			clearInterval(timer);
			page--;
			// 如果滚到头 从头开始滚动
			if (page < 0) {
				page = imgs.length - 1;
			}
			middle.style.left = -w * page + "px";
		}
		last.onmouseout = function() {
				autoRoll();
			}
			// 自动滚
		autoRoll();
		wrap.onmouseover = function() {
			clearInterval(timer);
		}
		wrap.onmouseout = function() {
			autoRoll();
		}
		window.onload = function() {
			var mySwiper = new Swiper('.swiper-container', {
				autoplay: 4000,
				speed: 2000,
				loop: true,
				effect: 'fade',
				fade: {
					crossFade: false,
				}
			})
			var mySwiper2 = new Swiper('.swiper-container1', {
				direction: 'horizontal',
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
				autoplay: 4000,
				speed: 2000,
				loop: true,
			})
		}
		$(function() {
			$('#pic').sliphover({
				backgroundColor: 'rgba(255,192,0,0.8)',
				caption: 'data-caption',
				fontColor: 'black',
				withLink: true
			})
		})
		$('.example img').zoomify();

		var nav = document.querySelector(".nav");
		var nav1_1 = document.querySelector(".nav1_1");
		var clic = document.querySelector(".click");
		document.onscroll = function() {
			if (clic.style.display == "none") {

				if (scrollY > 300) {
					nav.style.display = "block"
				} else {
					nav.style.display = "none"
				}
				if (scrollY > 600) {
					nav1_1.style.display = "none"
				} else {
					nav1_1.style.display = "block"
				}
			}
		}
		var bol = true;
		$(".click").on("click", function() {
			if (bol) {
				$(".nav").animate({
					height: '+=88px'
				})
				bol = false
			} else {
				$(".nav").animate({
					height: '-=88px'
				})
				bol = true;
			}

		})
	</script>

</html>